<template>
    <div :class="['finance-wrapper fl', props.className]">
        <div class="img-wrapper"><img src="../assets/bz.png" alt="" /></div>
        <div class="right">
            <div class="all-text">累计总入金</div>
            <div class="right-data fl">
                <div>{{ props.item.data }}</div>
                <div>元</div>
            </div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    item: {
        type: Object,
        default: {},
    },
    className: {
        type: String,
        default: '',
    },
});
</script>

<style lang="css" scoped>
.fl {
    display: flex;
    align-items: center;
}
.finance-wrapper {
    width: 249px;
    max-width: max-content;
    padding: 16px 40px 16px 35px;
    justify-content: center;
    background: #fff;
    border-radius: 6px;

    .right {
        display: flex;
        flex-direction: column;
        margin-left: 35px;
        .all-text {
            height: 22px;
            font-size: 16px;
            font-weight: 400;
            color: #5c5f66;
            line-height: 22px;
        }
        .right-data {
            margin-top: 10px;
            color: #151b26;
            align-items: flex-end;

            div:first-child {
                height: 35px;
                font-size: 30px;
                font-weight: bold;
                line-height: 35px;
            }
            div:last-child {
                height: 22px;
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
            }
        }
    }
}
</style>
